پرس و جوهای استایل کانتینر CSS: انقلابی در طراحی واکنش‌گرای مبتنی بر المان

چشم‌انداز طراحی وب مدت‌هاست که تحت تأثیر مفهوم طراحی وب واکنش‌گرا شکل گرفته است، پارادایمی که به وب‌سایت‌ها اجازه می‌دهد تا طرح‌بندی و ظاهر خود را در تعداد زیادی از دستگاه‌ها و اندازه‌های صفحه نمایش تطبیق دهند. سال‌هاست که این قابلیت انطباق عمدتاً توسط پرس و جوهای رسانه مبتنی بر ویوپورت هدایت می‌شود، که ویژگی‌های پنجره مرورگر را هدف قرار می‌دهند. در حالی که این رویکرد فوق‌العاده قدرتمند و اساسی است، اما در دستیابی به کنترل دقیق بر روی کامپوننت‌های منفرد در یک صفحه، محدودیت‌های ذاتی دارد.

وارد پرس و جوهای استایل کانتینر CSS شوید. این ویژگی پیشگامانه نشان‌دهنده یک تکامل قابل توجه در CSS است و تمرکز را از ویوپورت به کانتینر – المان والد که یک کامپوننت خاص را در بر می‌گیرد – تغییر می‌دهد. این تغییر اساسی به توسعه‌دهندگان قدرت می‌دهد تا طرح‌های واکنش‌گرای واقعاً المان‌محور ایجاد کنند و کامپوننت‌ها را قادر می‌سازد تا استایل‌ها و طرح‌بندی‌های خود را بر اساس ابعاد خود، به جای پنجره مرورگر گسترده‌تر، تطبیق دهند. این یک تغییر پارادایم است که نوید ساده‌سازی الگوهای واکنش‌گرای پیچیده و ایجاد رابط‌های کاربری قوی‌تر، قابل نگهداری‌تر و آگاه به زمینه برای مخاطبان جهانی را می‌دهد.

محدودیت‌های واکنش‌گرایی مبتنی بر ویوپورت

قبل از پرداختن به جزئیات مربوط به پرس و جوهای کانتینر، درک اینکه چرا آنها چنین تغییری ایجاد می‌کنند، بسیار مهم است. طراحی واکنش‌گرای سنتی به شدت به @media (min-width: 768px) یا قوانین مشابه هدف‌گیری ویوپورت متکی است. در حالی که این رویکرد برای تنظیمات کلی طرح‌بندی صفحه مؤثر است، اما هنگام برخورد با کامپوننت‌هایی که ممکن است در بخش‌های مختلف صفحه، هر کدام با فضای در دسترس متفاوت، تودرتو باشند، چالش‌هایی را ایجاد می‌کند.

سناریو: یک کامپوننت مشترک در زمینه‌های متعدد

یک کامپوننت رابط کاربری رایج، مانند کارت محصول یا یک قطعه پروفایل کاربر را تصور کنید. در یک سایت تجارت الکترونیک معمولی یا یک پلتفرم رسانه‌های اجتماعی، این کامپوننت ممکن است در چندین زمینه متمایز ظاهر شود:

• در یک صفحه فهرست‌بندی محصول گسترده و چند ستونی.
• در داخل یک ویجت نوار کناری باریک.
• به عنوان یک آیتم برجسته در یک بنر قهرمان بزرگ.
• در یک پنجره مودال جمع و جور.

با پرس و جوهای رسانه مبتنی بر ویوپورت، دستیابی به استایل‌دهی متمایز و مناسب با زمینه برای این کامپوننت منفرد به یک کار پیچیده تبدیل می‌شود. ممکن است در نهایت با موارد زیر روبرو شوید:

• زنجیره‌های انتخابگر بیش از حد خاص که شکننده و دشوار برای نگهداری هستند.
• قوانین CSS تکراری برای یک کامپوننت مشابه تحت شرایط مختلف ویوپورت.
• نیاز به JavaScript برای تشخیص اندازه واقعی رندر شده کامپوننت و اعمال کلاس‌ها بر اساس آن، که پیچیدگی غیرضروری و سربار عملکرد بالقوه را اضافه می‌کند.

این اغلب منجر به سناریویی می‌شود که در آن رفتار یک کامپوننت توسط طرح‌بندی کلی صفحه دیکته می‌شود تا نیازهای ذاتی و فضای در دسترس آن. این می‌تواند منجر به سرریزهای ناخوشایند، متن‌های فشرده یا استفاده ناکارآمد از فضا شود، به خصوص که کاربران از طریق طیف وسیعی از دستگاه‌ها و پیکربندی‌های مرورگر در سراسر جهان به محتوا دسترسی پیدا می‌کنند.

معرفی پرس و جوهای کانتینر CSS

پرس و جوهای کانتینر اساساً این را با اجازه دادن به شما برای تعریف محدوده‌های واکنش‌گرا بر اساس ابعاد یک کانتینر والد، به جای ویوپورت مرورگر، تغییر می‌دهند. این بدان معناست که می‌توانید استایل‌ها را بر اساس میزان عرض یا ارتفاع المان حاوی آن، به یک المان اعمال کنید.

مفاهیم اصلی: کانتینر و مهار

برای استفاده از پرس و جوهای کانتینر، ابتدا باید یک کانتینر ایجاد کنید. این کار با استفاده از ویژگی container-type انجام می‌شود. سپس نام کانتینر (اختیاری، اما برای وضوح خوب است) و ویژگی پرس و جوی کانتینر (به عنوان مثال، عرض، ارتفاع) را تعریف می‌کنید.

ویژگی‌های کلیدی برای پرس و جوهای کانتینر

• container-type: این ویژگی نوع مهار را تعریف می‌کند. رایج‌ترین مقادیر عبارتند از:
• normal: مقدار پیش‌فرض. المان یک کانتینر پرس و جوی جدید ایجاد نمی‌کند.
• inline-size: یک کانتینر ایجاد می‌کند که بر اساس اندازه درون خطی (افقی برای زبان‌های LTR) المان پرس و جو می‌کند. این پرکاربردترین برای طراحی واکنش‌گرا است.
• block-size: یک کانتینر ایجاد می‌کند که بر اساس اندازه بلوکی (عمودی برای زبان‌های بالا به پایین) المان پرس و جو می‌کند.
• size: یک کانتینر ایجاد می‌کند که بر اساس هر دو ابعاد درون خطی و بلوکی پرس و جو می‌کند.
• container-name: یک نام سفارشی به کانتینر اختصاص می‌دهد. این زمانی مفید است که چندین کانتینر در یک صفحه دارید و می‌خواهید استایل‌ها را به یک کانتینر خاص هدف قرار دهید.

قانون @container

مشابه پرس و جوهای @media، پرس و جوهای کانتینر با استفاده از قانون @container تعریف می‌شوند. این قانون به شما اجازه می‌دهد تا شرایط را بر اساس ویژگی‌های کانتینر مشخص کنید.

نحو به این شکل است:

            
.my-component {
  container-type: inline-size;
  container-name: card-container;
}

@container card-container (min-width: 300px) {
  .my-component {
    /* Styles applied when the container named 'card-container' is at least 300px wide */
    background-color: lightblue;
  }
}

@container (max-width: 250px) {
  .my-component {
    /* Styles applied when the container is at most 250px wide (no name needed if only one container) */
    font-size: 0.8em;
  }
}

            

              
                Copy
              
            
          

به استفاده از container-name در مثال اول توجه کنید. اگر فقط یک کانتینر در محدوده پرس و جو وجود داشته باشد، می‌توان نام را حذف کرد. با این حال، استفاده از نام‌ها CSS شما را خواناتر و قابل نگهداری‌تر می‌کند، به خصوص در کتابخانه‌های کامپوننت پیچیده‌ای که در تیم‌ها و پروژه‌های جهانی مختلف استفاده می‌شوند.

کاربردهای عملی و موارد استفاده

پرس و جوهای کانتینر سطح جدیدی از کنترل را برای واکنش‌گرایی در سطح کامپوننت باز می‌کنند. بیایید برخی از سناریوهای عملی را بررسی کنیم:

1. تطبیق طرح‌بندی‌های کارت

یک کارت محصول را در نظر بگیرید که باید بر اساس عرض گرید والد یا کانتینر فلکس خود، به طور متفاوتی نمایش داده شود.

            
.product-card {
  container-type: inline-size;
  border: 1px solid #ccc;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

/* Small container: stacked layout */
@container (max-width: 200px) {
  .product-card {
    flex-direction: column;
    text-align: center;
  }
  .product-card img {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

/* Medium container: side-by-side with text */
@container (min-width: 201px) and (max-width: 400px) {
  .product-card {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
  .product-card img {
    margin-right: 15px;
    margin-bottom: 0;
    max-width: 120px; /* Example: Image takes less horizontal space */
  }
}

/* Large container: more prominent image and details */
@container (min-width: 401px) {
  .product-card {
    flex-direction: row;
    align-items: center;
    text-align: center;
  }
  .product-card img {
    margin-right: 20px;
    margin-bottom: 0;
    max-width: 150px;
  }
}

            

              
                Copy
              
            
          

در این مثال، .product-card خود یک کانتینر است. با تغییر عرض آن، طرح‌بندی داخلی آن (چیدمان پشته‌ای در مقابل کنار هم) و استایل‌دهی تصویر و متن آن بر این اساس تطبیق می‌یابند، صرف نظر از اندازه کلی ویوپورت. این فوق‌العاده قدرتمند است برای ایجاد کامپوننت‌های قابل استفاده مجدد و خودکفا که به طور مداوم در هر کجا که در یک وب‌سایت جهانی قرار می‌گیرند، کار می‌کنند.

2. کامپوننت‌های ناوبری

نوارهای ناوبری یا منوها اغلب نیاز دارند تا از یک طرح‌بندی افقی در صفحه‌های بزرگ‌تر به یک منوی عمودی یا همبرگری در صفحه‌های کوچک‌تر تبدیل شوند. پرس و جوهای کانتینر به کامپوننت ناوبری اجازه می‌دهند تا این تغییر را بر اساس عرض موجود در والد خود، که ممکن است یک هدر یا یک نوار کناری باشد، دیکته کند.

            
.main-nav {
  container-type: inline-size;
  display: flex;
  justify-content: flex-end;
}

.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.main-nav li {
  margin-left: 20px;
}

/* When the nav container is narrow, stack the menu vertically */
@container (max-width: 400px) {
  .main-nav {
    justify-content: center;
  }
  .main-nav ul {
    flex-direction: column;
    align-items: center;
  }
  .main-nav li {
    margin-left: 0;
    margin-bottom: 10px;
  }
}

            

              
                Copy
              
            
          

3. المان‌های فرم و فیلدهای ورودی

طرح‌بندی‌های فرم پیچیده، به ویژه آنهایی که دارای چند ستون یا برچسب‌ها و ورودی‌های هم‌تراز هستند، می‌توانند از این ویژگی بسیار سود ببرند. یک گروه فرم می‌تواند یک کانتینر شود و فیلدهای ورودی یا برچسب‌های فرزند آن می‌توانند عرض، حاشیه‌ها یا ویژگی‌های نمایش خود را بر اساس اندازه گروه فرم تنظیم کنند.

4. ویجت‌ها و کارت‌های داشبورد

در رابط‌های داشبورد، ویجت‌های مختلف (به عنوان مثال، نمودارها، جداول داده، کارت‌های آمار) اغلب در یک سیستم گرید قرار می‌گیرند. هر ویجت می‌تواند یک کانتینر باشد و به عناصر داخلی خود اجازه می‌دهد تا به خوبی تنظیم شوند. یک نمودار ممکن است نقاط داده کمتری یا یک تجسم متفاوت را در نمونه‌های ویجت کوچک‌تر نشان دهد، در حالی که یک جدول داده ممکن است ستون‌های کم اهمیت‌تری را پنهان کند.

5. ملاحظات بین‌المللی‌سازی

یکی از جذاب‌ترین جنبه‌ها برای مخاطبان جهانی این است که چگونه پرس و جوهای کانتینر می‌توانند تلاش‌های بین‌المللی‌سازی (i18n) را افزایش دهند. زبان‌های مختلف دارای طول متن متفاوتی هستند. به عنوان مثال، آلمانی یا اسپانیایی اغلب می‌توانند طولانی‌تر از انگلیسی باشند. یک کامپوننت که در انگلیسی عالی به نظر می‌رسد، ممکن است هنگام ترجمه به زبانی با کلمات یا ساختارهای جمله طولانی‌تر، خراب شود یا خیلی فشرده شود.

با استفاده از پرس و جوهای کانتینر، می‌توانید نقاط شکست را بر اساس عرض واقعی رندر شده کامپوننت تنظیم کنید. این بدان معناست که کامپوننت می‌تواند طرح‌بندی و تایپوگرافی خود را بر اساس فضایی که در اختیار دارد، تطبیق دهد و متن طولانی‌تر حاصل از ترجمه‌ها را به شکلی بهتر از پرس و جوهای مبتنی بر ویوپورت به تنهایی جای دهد. این منجر به یک تجربه کاربری سازگارتر و صیقلی‌تر در تمام زبان‌ها و مناطق پشتیبانی شده می‌شود.

پشتیبانی از ویژگی پرس و جوی کانتینر

از اواخر سال 2023 و اوایل سال 2024، پشتیبانی مرورگر از پرس و جوهای کانتینر به طور پیوسته در حال بهبود است. مرورگرهای مدرن مانند Chrome، Firefox، Safari و Edge همگی پشتیبانی خوبی را ارائه می‌دهند، یا به طور بومی یا پشت پرچم‌های ویژگی که به تدریج فعال می‌شوند. با این حال، برای توسعه جهانی، همیشه عاقلانه است که:

• caniuse.com را بررسی کنید برای آخرین داده‌های پشتیبانی مرورگر.
• برای مرورگرهای قدیمی‌تری که از پرس و جوهای کانتینر پشتیبانی نمی‌کنند، جایگزین ارائه دهید. این ممکن است شامل پایبندی به الگوهای واکنش‌گرای ساده‌تر یا استفاده از راهکارهای مبتنی بر JavaScript در صورت لزوم مطلق برای پشتیبانی قدیمی باشد.

روند مشخص است: پرس و جوهای کانتینر در حال تبدیل شدن به یک ویژگی استاندارد CSS هستند و تکیه بر آنها برای واکنش‌گرایی در سطح کامپوننت، آینده است.

تکنیک‌ها و ملاحظات پیشرفته

فراتر از پرس و جوهای عرض و ارتفاع اولیه، CSS قابلیت‌های پیشرفته‌تری را برای استایل‌دهی کانتینر ارائه می‌دهد:

پرس و جوهای @container style()

اینجاست که پرس و جوهای استایل کانتینر واقعاً می‌درخشند. در حالی که پرس و جوهای @container (min-width: ...)` بر روی اندازه هستند، پرس و جوهای @container style()` به شما اجازه می‌دهند تا به مقادیر استایل محاسبه شده یک المان پاسخ دهید. این دنیای جدیدی از امکانات را باز می‌کند و کامپوننت‌ها را قادر می‌سازد تا بر اساس استایل‌های محاسبه شده خود، مانند موارد زیر، تطبیق یابند:

            
.dashboard-widget {
  container-type: inline-size;
  --widget-density: 1; /* Default density */
}

/* When the container is wide, we might want a more spaced-out look */
@container (min-width: 600px) {
  .dashboard-widget {
    --widget-density: 2; /* Increase spacing */
  }
}

.widget-title {
  font-size: calc(1rem + (var(--widget-density) - 1) * 0.2rem); /* Adjust font size based on density */
  margin-bottom: calc(10px * var(--widget-density)); /* Adjust margin */
}

            

              
                Copy
              
            
          

            
.image-gallery {
  container-type: inline-size;
  aspect-ratio: 16 / 9; /* Define aspect ratio */
}

@container style(aspect-ratio >= 2) {
  /* Styles for when the container is wider than it is tall (e.g., landscape) */
  .image-gallery img {
    object-fit: cover;
  }
}

@container style(aspect-ratio < 1) {
  /* Styles for when the container is taller than it is wide (e.g., portrait) */
  .image-gallery img {
    object-fit: contain;
  }
}

            

              
                Copy
              
            
          

            
.parent-container {
  container-type: inline-size;
  container-name: parent;
  width: 100%;
  display: flex;
}

.child-component {
  flex: 1;
  margin: 10px;
  container-type: inline-size;
  container-name: child;
  background-color: lightcoral;
  padding: 10px;
}

/* This query applies to the .child-component based on ITS width */
@container child (min-width: 250px) {
  .child-component {
    background-color: lightgreen;
  }
}

/* This query applies to the .parent-container based on ITS width */
@container parent (min-width: 600px) {
  .parent-container {
    flex-direction: column;
  }
}

            

              
                Copy